<template>
<div class="down-bth"><el-button type="primary" icon="UploadFilled" @click="downSome">导入报表</el-button></div>
<el-dialog v-model="upShow" title="国家级报表导入" width="50%">
      <el-form :model="upfileInfo" label-width="100px" ref="ruleFormRef"
      :rules="rules">
      <el-form-item label="填报人" prop="developArea">
        <el-select v-model="upfileInfo.developArea" placeholder="选择经开区" @change="changeTem"  v-if="user.userRole=='1'">
          <el-option  v-for="item in countryList"  :key="item.id" :label="item.develop" :value="item.develop" />
        </el-select>
        <el-input v-model="upfileInfo.developArea" disabled autocomplete="off" style="width: 214px;"  v-else />
      </el-form-item>
      <el-form-item label="报表类型" prop="templateId">
        <el-select v-model="upfileInfo.templateId" placeholder="选择类型" @change="changeTem">
          <el-option v-for="item in pathList"  :key="item.templateType" :label="item.templateType" :value="item.templateId" />
        </el-select>
      </el-form-item>
      <el-form-item label="报表期别" v-if="upfileInfo.templateId"  prop="year" >
        <div class="data-check">
         <el-date-picker
          v-model="upfileInfo.year"
          placeholder="时间"
          style="width: 214px;margin-right: 20px;"
          :format="upfileInfo.templateId=='1'?'YYYY年MM月':'YYYY年'"
          :type="upfileInfo.templateId=='1'?'month':'year'"
          :value-format="upfileInfo.templateId=='1'?'YYYY年MM月':'YYYY年'"
          @change = "dataChange"
        />
        </div> 
      </el-form-item>
      <el-form-item label="季度" prop="week" v-if="['2','5','6','7'].includes(upfileInfo.templateId)">
        <el-select v-model="upfileInfo.week" placeholder="选择季度" @change="changeWeek">
          <el-option label="第1季度" value="第1季度" />
          <el-option label="第2季度" value="第2季度" />
          <el-option label="第3季度" value="第3季度" />
          <el-option label="第4季度" value="第4季度" />
        </el-select>
      </el-form-item>
      <el-form-item label="报表上传" prop="file">
        <el-upload
          ref="upload"
          class="upload-demo"
          action=""
          :limit="1"
          :on-exceed="handleExceed"
          :auto-upload="false"
          :on-change = "getFile"
         >
    <template #trigger>
      <el-button type="info">选择文件</el-button>
    </template>
    <template #tip>
      <div class="el-upload__tip text-red">
        只能上传一个，继续上传将会覆盖
      </div>
    </template>
  </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="upShow=false">取消</el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="editShow" title="修改报表" width="50%" :before-close="handleClose">
      <el-form :model="editInfo" label-width="100px" ref="ruleFormRefs"
      :rules="rules">
      <el-form-item label="报表名称">
        <el-input v-model="editInfo.name" disabled autocomplete="off" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="报表上传" prop="files">
        <el-upload
          ref="upload"
          class="upload-demo"
          action=""
          :limit="1"
          :on-exceed="handleExceed"
          :auto-upload="false"
          :on-change = "getFile"
         >
    <template #trigger>
      <el-button type="info">选择文件</el-button>
    </template>
    <template #tip>
      <div class="el-upload__tip text-red">
        只能上传一个，继续上传将会覆盖
      </div>
    </template>
  </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editClear">取消</el-button>
        <el-button type="danger" @click="editSure()">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted ,reactive,watch} from 'vue'
import { ElMessage, genFileId  } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile,FormInstance } from 'element-plus'
import { getTemplateType,addReport,editeReport, userFindByList} from "@/util/api";
import { useStore } from '@/store'
const user = useStore().state.userInfo
const upload = ref<UploadInstance>()
const ruleFormRef = ref<FormInstance>()
//展示录入报表
const upShow:any = ref(false)
const editShow:any = ref(false)
//筛选显示的报表类型
const pathList: any = ref([])
//国家级经开区列表
const countryList: any = ref([])
const emit = defineEmits(['editChange'])
//报表上传参数
const upfileInfo:any = ref({
     developArea:'',
     templateId:"",
     val:"",
     week:"",
     files:"",
     year:""
})
const dataInfo: any = ref({
        username: "",
        team: "",
        page: 1,
        pageSize: 100,
        labelOne: ""
  })
//校验
const rules = reactive({
    developArea: [
      { required: true, message: '请输入填报人', trigger: 'blur' },
    ],
    templateId: [
      { required: true, message: '请选择类别', trigger: 'blur' },
    ],
    week: [
      { required: true, message: '请选择季度', trigger: 'change' },
    ],
    year:[
    { required: true, message: '请选择日期', trigger: 'change' },
    ],
    files: [
    { required: true, message: '请上传报表', trigger: 'change' }
    ],
  })
  const props = defineProps({
    reportItem:Object,
    showEidt:Boolean
    })
    watch(
    ()=>props,
    (newVal:any)=>{
        console.log(newVal)
        editShow.value=newVal.showEidt
        editInfo.value['id'] = newVal.reportItem.id
        editInfo.value['name'] = newVal.reportItem.name  
    },
    {deep:true}
    )
//报表修改参数
const editInfo:any=ref({
  id:"",
  name:"",
  files:""
})
  //国家级导入报表
const downSome = ()=>{
  upShow.value=true
}
//类别选择
const changeTem=(val:any)=>{
  upfileInfo.value.year=""
  upfileInfo.value.week=""
  upfileInfo.value.val=""
}
//获取类别和经开区
const getlistType = async () => {
  if(user.userRole=='1'){
   let result:any = await userFindByList(dataInfo.value)
   result.data.content.forEach((v:any)=>{
        if(v.level=="国家级")
        countryList.value.push(v)
  })
  }
  let res: any = await getTemplateType();
  res.data.forEach((v:any)=>{
    v.typeList.forEach((item:any)=>{
      pathList.value.push(item)
    })
  })
  // console.log(pathList.value,countryList.vaule)
}
//取消修改
const editClear=()=>{
  editShow.value = false;
  editInfo.value['id'] = ''
  editInfo.value['name'] = ''
  editInfo.value['files'] = ''
  handleClose(false)
}
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const getFile=(uploadFile:any, uploadFiles:any)=>{
    console.log(uploadFile,upShow.value)
    if(upShow.value){
      upfileInfo.value.files=uploadFile.raw
    }else{
      editInfo.value.files = uploadFile.raw
    }
    
}
// 日期选择
const dataChange=(val:string)=>{
  //  console.log(val)
   upfileInfo.value.val = val + upfileInfo.value.week
}

//季选择
const changeWeek=(val:any)=>{
  upfileInfo.value.val =  upfileInfo.value.year+val
}
//确定上传
const submitForm = async (formEl:any) => {
  if (!formEl) return
  await formEl.validate(async (valid:any) => {
    if (!valid) return
    console.log(upfileInfo.value)
    let data = new FormData
    data.append('templateId', upfileInfo.value.templateId)
    data.append('developArea', upfileInfo.value.developArea)
    data.append('files', upfileInfo.value.files)
    data.append('val', upfileInfo.value.val)
    console.log(data)
    let res:any =  await addReport(data)
    console.log(res)
    if(res.code!=='200')return
    ElMessage.success('导入成功！')
    upShow.value=false
    handleClose(true)
  })
}
//确定修改
const editSure =async () => {
  console.log(editInfo.value)
   if(!editInfo.value.files) return ElMessage.error('请传入文件')
   console.log(editInfo.value)
  let data = new FormData
  data.append('id', editInfo.value.id)
  data.append('files', editInfo.value.files)
  let res:any = await editeReport(data)
  console.log(res)
  if(res.code=='200'){
    ElMessage.success('修改成功')
    editShow.value=false
    handleClose(true)
  }
    
}
const handleClose = (isFrash:Boolean) => {
      editShow.value = false
      emit('editChange', isFrash)
}
onMounted(()=>{
    if(user.userRole!='1'){
    console.log(user.develop)
    upfileInfo.value.developArea=user.develop
   }
    getlistType()
})
</script>